{{! Pricing plan (ADR 0040): an optional label, the plan's name, price and period, a short text, a full-width button, then what is included as an Icon list (its markup and look, requires icon-list), in a box with a column's looks. Recommended (ADR 0052): the accent color, or an outline with the label as a tag; a glow with two sparkles in the corner; the label in a neon color and with an icon (ADR 0054). }}
<article {{@attrs}}>{{#glow}}<span class="sv-pricing-plan__sparkles" aria-hidden="true"><svg class="sv-pricing-plan__sparkle" viewBox="0 0 24 24" focusable="false"><path d="M12 2c.7 5.2 3 7.7 8.5 8.5-5.5.8-7.8 3.3-8.5 8.5-.7-5.2-3-7.7-8.5-8.5C9 9.7 11.3 7.2 12 2z"/></svg><svg class="sv-pricing-plan__sparkle sv-pricing-plan__sparkle--small" viewBox="0 0 24 24" focusable="false"><path d="M12 2c.7 5.2 3 7.7 8.5 8.5-5.5.8-7.8 3.3-8.5 8.5-.7-5.2-3-7.7-8.5-8.5C9 9.7 11.3 7.2 12 2z"/></svg></span>{{/glow}}{{#badge}}<p class="sv-pricing-plan__badge">{{#tagIcon}}<span class="sv-pricing-plan__badge-icon sv-glyph-{{tagIcon}}" aria-hidden="true"></span>{{/tagIcon}}<span{{@edit badge}}>{{badge}}</span></p>{{/badge}}<h3 class="sv-pricing-plan__name"{{@edit name}}>{{{name}}}</h3><p class="sv-pricing-plan__price"><span class="sv-pricing-plan__amount"{{@edit price}}>{{price}}</span>{{#period}}<span class="sv-pricing-plan__period"{{@edit period}}>{{period}}</span>{{/period}}</p>{{#text}}<p class="sv-pricing-plan__text"{{@edit text}}>{{text}}</p>{{/text}}{{#button.label}}<div class="sv-button sv-button--variant-{{buttonVariant}} sv-button--size-md sv-pricing-plan__button">{{#button.link.url}}<a class="sv-button__control{{#button.arrow}} sv-button__control--arrow{{/button.arrow}}{{#button.icon}} sv-button__control--icon{{#button.iconEnd}} sv-button__control--icon-end{{/button.iconEnd}} sv-glyph-{{button.icon}}{{/button.icon}}" href="{{button.link.url}}"{{#button.link.newTab}} target="_blank" rel="noopener noreferrer"{{/button.link.newTab}}{{@edit button.label}}>{{button.label}}</a>{{/button.link.url}}{{^button.link.url}}<span class="sv-button__control{{#button.arrow}} sv-button__control--arrow{{/button.arrow}}{{#button.icon}} sv-button__control--icon{{#button.iconEnd}} sv-button__control--icon-end{{/button.iconEnd}} sv-glyph-{{button.icon}}{{/button.icon}}"{{@edit button.label}}>{{button.label}}</span>{{/button.link.url}}</div>{{/button.label}}<ul class="sv-icon-list sv-icon-list--icon-size-md sv-icon-list--text-size-md sv-icon-list--columns-1 sv-icon-list--gap-md sv-pricing-plan__features">{{#features}}<li class="sv-icon-list__item"><span class="sv-icon-list__icon" aria-hidden="true"><span class="sv-icon__glyph sv-glyph-{{featureIcon}}"></span></span><span class="sv-icon-list__text"{{@edit features.text}}>{{text}}</span></li>{{/features}}</ul></article>